<template>
  <section class="login-section">
    <div class="login-container">
      <div class="right-section">
        <Particles
          id="tsparticles"
          :particlesInit="particlesInit"
          :options="particles"
          style="height: 100%"
        />
      </div>
      <div class="left-section">
        <div class="login-header">
          <h1 class="title animation a1">Welcome Back!</h1>
          <h4 class="sub-title animation a2">Login to Lee</h4>
        </div>
        <t-form
          ref="form"
          class="login-form"
          :data="formData"
          :rules="FORM_RULES"
          label-width="0"
          @submit="onSubmit"
        >
          <t-form-item name="account" class="form-field-group animation a3">
            <t-input
              v-model="formData.username"
              size="large"
              clearable
              placeholder="admin"
            >
              <template #prefix-icon>
                <component is="UserIcon" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password" class="form-field-group animation a4">
            <t-input
              v-model="formData.userpass"
              size="large"
              :type="showPsw ? 'text' : 'password'"
              clearable
              placeholder="123456"
            >
              <template #prefix-icon>
                <component is="LockOnIcon" />
              </template>
              <template #suffix-icon>
                <component :is="showPsw?'BrowseIcon':'BrowseOffIcon'" @click="showPsw = !showPsw" />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="remember" class="forgot-password animation a5">
            <t-checkbox>记住账号</t-checkbox>
          </t-form-item>
          <t-form-item class="btn-container animation a6">
            <t-button block size="large" type="submit"> 登录 </t-button>
          </t-form-item>
        </t-form>
      </div>
    </div>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { MessagePlugin, NotifyPlugin } from 'tdesign-vue-next';
import type { FormInstanceFunctions, FormRule } from 'tdesign-vue-next';
import { HOME_URL } from '@/config/config';
import { useUserStore } from '@/store/modules/user';
import { loadFull } from 'tsparticles';
import { particles } from '@/components/particles';
const particlesInit = async (engine: any) => {
  await loadFull(engine);
};

const INITIAL_DATA = {
  username: 'admin',
  userpass: '123456',
  checked: false,
};

const FORM_RULES: Record<string, FormRule[]> = {
  username: [{ required: true, message: '账号必填', type: 'error' }],
  userpass: [{ required: true, message: '密码必填', type: 'error' }],
};

const type = ref('password');

const form = ref<FormInstanceFunctions>();
const formData = ref({ ...INITIAL_DATA });
const showPsw = ref(false);

const router = useRouter();

const userStore = useUserStore();

const onSubmit = ({ validateResult }: any) => {
  if (validateResult === true) {
    try {
      if (
        formData.value.username == 'admin' &&
        formData.value.userpass == '123456'
      ) {
        userStore.SET_TOKEN('lee');
        // 2.跳转到首页
        console.log(router.getRoutes())
        router.push(HOME_URL);
        let h = new Date().getHours();
        let tip = '';
        if (h < 10) tip = '早上好';
        else if (h < 12) tip = '上午好';
        else if (h < 14) tip = '中午好';
        else if (h < 18) tip = '下午好';
        else tip = '晚上好';
        NotifyPlugin.success({
          title: tip,
          content: '欢迎登录!',
          duration: 1000,
          closeBtn: true,
        });
      } else {
        MessagePlugin.error('账号或密码错误!');
      }
    } catch (e: any) {
      console.log(e);
      MessagePlugin.error(e.message);
    }
  }
};
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  overflow: hidden;

  .left-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation-name: left-section;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 1s;
  }

  .right-section {
    flex: 1;
    background: linear-gradient(to right, #000 0%, #000 100%);
    // background-image: url('https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');
    background-image: url(@/assets/images/img/aurora.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: 1s cubic-bezier(0.95, 0.46, 0.45, 0.94);
  }

  .login-header {
    text-align: center;
    margin-bottom: 24px;

    .brand-logo {
      width: 170px;
      margin: 0 auto;
      transition-delay: 2s;

      .logo-img {
        width: 100%;
      }
    }

    .title {
      margin: 0;
      color: var(--color-primary);
    }

    .sub-title {
      margin-top: 10px;
      font-weight: normal;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .login-form {
    display: flex;
    flex-direction: column;

    .forgot-password {
      text-align: right;
      margin: 3px 0;
    }

    .form-field-group {
      .form-field {
        height: 50px;
        width: 100%;
        font-size: 14px;
        padding: 3px 10px;
        margin: 12px auto;
        outline: 0;
        border-radius: 4px;
        transition-duration: 0.2s;
      }
    }
  }

  .animation {
    animation-name: move;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 2s;

    &.a1 {
      animation-delay: 2s;
    }

    &.a2 {
      animation-delay: 2.1s;
    }

    &.a3 {
      animation-delay: 2.2s;
    }

    &.a4 {
      animation-delay: 2.3s;
    }

    &.a5 {
      animation-delay: 2.4s;
    }

    &.a6 {
      animation-delay: 2.5s;
    }
  }
}

@keyframes move {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes left-section {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    padding: 1.5rem 2.5rem;
    width: 440px;
  }
}

.t-input .t-input__prefix > .t-icon {
  color: var(--color-primary);
}
</style>
